<template>
  <!--发布评论框-->
  <view v-if="type == 'evaluate'">
    <view class="cu-modal bottom-modal" :class="comment_flag?'show':''" @click="handleCloseCommentBox">
      <view class="cu-dialog" @click.stop="" style="border-radius: 20upx 20upx 0 0;">
        <view class="cu-dialog bg-white" style="width: 100%; background-color: white;">
          <view class="cu-bar justify-end pos-re" style="height: 106upx;">
            <view class="content">评论</view>
            <image src="/static/icon/tutorials/close@2x.png" alt="" style="width: 28upx; height: 28upx; right: 3%;" @click="handleCloseCommentBox"></image>
          </view>
          <view style="width: 100%; padding: 0 3% 0 3%;">
            <textarea class="textarea" placeholder="请输入…" v-model="content_html" max-length="200" style="width: 100%;"></textarea>
          </view>
            <view class="flex" style="flex-wrap: wrap; padding: 3% 0 0 4%; margin-bottom: 4%;">
              <view class="flex"
                    style="width: 170upx; height: 146upx; border-radius: 10upx; padding: 0 3% 3% 0; margin-top: 3%; position:relative;"
                    v-for="(item,index) in publish_imgs" :key="index">
                <image :src="item" mode="aspectFill" style="width: 168upx; height: 144upx;"></image>
                <image src="/static/icon/comments/shanchu@2x.png" @click="handleDeleteImg(index)"
                       style="width: 28upx; height: 28upx; position:absolute; top: -14upx; right: 8upx; border-radius: 50%;"></image>
              </view>
              <view v-if="publish_imgs.length<5" class="flex" @click="handleUploadImg()" style="margin: 3% 0;">
                <image src="/static/icon/comments/add_img3@2x.png"
                       style="width: 168upx; height: 144upx; border-radius: 10upx;"></image>
              </view>
            </view>
          <view class="flex justify-center align-center evaluate-com-confirm cu-bar" @click="handlePublishComment(f_id)">
            确定
          </view>
        </view>
      </view>
    </view>
  </view>
  <view v-else>
    <view class="cu-modal" :class="comment_flag?'show':''" @touchmove.stop.prevent="">
      <view class="cu-dialog bg-white" style="width: 642upx;">
        <view class="cu-bar justify-end">
          <view class="content">评论</view>
        </view>
        <view style="width: 100%; padding-left: 26upx;">
          <textarea class="textarea" placeholder="请输入…" v-model="content_html" max-length="200"></textarea>
          <view class="flex" style="flex-wrap: wrap;">
            <view class="flex"
                  style="width: 140upx; height: 120upx; border-radius: 10upx; margin: 0 10upx 10upx 0; position:relative;"
                  v-for="(item,index) in publish_imgs" :key="index">
              <image :src="item" mode="aspectFill" style="width: 140upx; height: 120upx;"></image>
              <image src="/static/icon/comments/shanchu@2x.png" @click="handleDeleteImg(index)"
                     style="width: 28upx; height: 28upx; position:absolute; top: -8upx; right: -8upx; border-radius: 50%;"></image>
            </view>
            <view v-if="publish_imgs.length<8" class="flex" @click="handleUploadImg()">
              <image src="/static/icon/comments/add_img3@2x.png"
                     style="width: 140upx; height: 120upx; border-radius: 10upx; margin: 0 10upx 10upx 0;"></image>
            </view>
          </view>
        </view>
        <view class="flex align-center justify-around cu-bar">
          <view class="flex align-center justify-center cancel-box" @click="handleCloseCommentBox">取消</view>
          <view style="width: 1%; height: 54upx; background-color: #F8F8F8;"></view>
          <view class="flex align-center justify-center define-box" @click="handlePublishComment(f_id)">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {chooseImage, getQiniuToken, test_authority} from "utils/wxUtil";

export default {
  name: "publishCommentDialog",
  props: {
    comment_flag: {
      type: Boolean,
      default(){
        return false
      }
    },
    f_table: {
      type: String,
      default() {
        return ''
      }
    },
    f_id: {
      type: String | Number,
      default() {
        return ''
      }
    },
    receive_user_id: {
      type: Number | String,
      default(){
        return ''
      }
    },
    p_id: {
      type: Number | String,
      default(){
        return 0
      }
    },
    type: {
      type: String,
      default(){
        return ''
      }
    }
  },
  data() {
    return {
      content_html: '',//评论内容
      publish_imgs: [],//发布的图片
      upload_imgs: [], //上传图片
    }
  },
  methods: {
    //发布评论
    handlePublishComment(f_id) {
      let imgs = '';
      if(this.publish_imgs.length > 0){
        imgs = this.publish_imgs.join(',')
      }
      let publishCommentData = {
        f_table: this.f_table,
        f_id: f_id,
        comment_flag: this.comment_flag,
        imgs: imgs,
        content_html: this.content_html,
        p_id: this.p_id,
        receive_user_id: this.receive_user_id,
      }
      this.$emit('handlePublishComment', publishCommentData)
      this.content_html = '';
      this.publish_imgs = [];
      this.upload_imgs = [];
    },
    //上传图片
    handleUploadImg() {
      getQiniuToken()
      let count = '';
      if(this.type === 'evaluate'){
         count = 5 - this.publish_imgs.length
      }else {
         count = 8 - this.publish_imgs.length
      }
      chooseImage(count).then(res => {
        this.upload_imgs = res.image_array;
        this.publish_imgs = this.publish_imgs.concat(this.upload_imgs);
      })
    },
    //删除图片
    handleDeleteImg(index) {
      this.publish_imgs.splice(index, 1);
    },
    handleCloseCommentBox(){
      this.$emit('handleCloseCommentBox', this.comment_flag)
    }
  }
}
</script>

<style lang="less" scoped>
.cancel-box{
  width: 49%;
  height: 54upx;
  font-size: 26upx;
}
.define-box{
  width: 49%;
  height: 54upx;
  font-size: 26upx;
  color: #E52718;
}
.textarea {
  background-color: #F8F8F8;
  width: 590upx;
  height: 122upx;
  border-radius: 10upx;
  padding: 22upx;
  font-size: 26upx;
  text-align: left;
  margin-bottom: 20upx;
}
.evaluate-com-confirm{
  width: 100%;
  height: 98upx;
  background-color: #E52718;
  color: white;
  font-size: 28upx;
}
</style>
